μΉμ¬μ΄νΈ μλμ μ¬μ©μ κ²½νμ κ°μ νκΈ° μν΄ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° κ΄λ¦¬μ μ€μ μ λ μΉ μ±λ₯ μμ°μ ꡬννλ λ°©λ²μ μμ보μΈμ. μλ°μ€ν¬λ¦½νΈ μ±λ₯ μ΅μ νλ₯Ό μν μ€μ©μ μΈ μ λ΅κ³Ό λꡬλ₯Ό ν¬ν¨ν©λλ€.
μΉ μ±λ₯ μμ°: μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° κ΄λ¦¬
μ€λλ μ λμ§νΈ νκ²½μμ μΉμ¬μ΄νΈ μλμ μ±λ₯μ λ§€μ° μ€μν©λλ€. μ¬μ©μλ€μ λΉ λ₯΄κ³ λ°μμ΄ λΉ λ₯Έ κ²½νμ κΈ°λνλ©°, κ²μ μμ§μ μ΄λ₯Ό μ 곡νλ μΉμ¬μ΄νΈλ₯Ό μ°μ μ μΌλ‘ νκ°ν©λλ€. μΉμ¬μ΄νΈ μλμ μν₯μ λ―ΈμΉλ ν΅μ¬ μμλ μλ°μ€ν¬λ¦½νΈ μμ μ ν¬κΈ°μ λλ€. ν° μλ°μ€ν¬λ¦½νΈ νμΌμ νμ΄μ§ λ‘λ μκ°μ ν¬κ² λ¦μΆ μ μμΌλ©°, μ΄λ μ’μ§ μμ μ¬μ©μ κ²½νμΌλ‘ μ΄μ΄μ§κ³ SEOμ λΆμ μ μΈ μν₯μ λ―ΈμΉ©λλ€. μ΄ κΈμμλ μΉ μ±λ₯ μμ°μ κ°λ , νΉν μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° κ΄λ¦¬μ μ΄μ μ λ§μΆ° μ΄ν΄λ³΄κ³ , μλ°μ€ν¬λ¦½νΈ μ±λ₯μ μ΅μ ννκΈ° μν μ€μ©μ μΈ μ λ΅κ³Ό λꡬλ₯Ό μ 곡ν©λλ€.
μΉ μ±λ₯ μμ°μ΄λ 무μμΈκ°?
μΉ μ±λ₯ μμ°μ νμ΄μ§ ν¬κΈ°, λ‘λ μκ°, HTTP μμ² μμ κ°μ μΉμ¬μ΄νΈ μ±λ₯μ λ€μν μΈ‘λ©΄μ λν νκ³μΉλ₯Ό μ€μ νλ κ²μ λλ€. μ΄λ μ±λ₯ μ΅μ νμ λν μ¬μ μλ°©μ μ κ·Ό λ°©μμΌλ‘, μΉμ¬μ΄νΈκ° λ°μ ν¨μ λ°λΌ νμ© κ°λ₯ν μ±λ₯ λ§€κ°λ³μ λ΄μ 머무λ₯΄λλ‘ λ³΄μ₯ν©λλ€. μΉμ¬μ΄νΈλ₯Ό κ°λ³κ³ λΉ λ₯΄κ² μ μ§νκΈ° μν μΌλ ¨μ κ°μ΄λλΌμΈκ³Ό μ μ½ μ‘°κ±΄μ΄λΌκ³ μκ°νλ©΄ λ©λλ€.
μ μ μλ μ±λ₯ μμ°μ λ€μκ³Ό κ°μ μ΄μ μ μ 곡ν©λλ€:
- λΉ λ₯΄κ³ μΌκ΄λ μ¬μ©μ κ²½ν μ μ§: νκ³λ₯Ό μ€μ ν¨μΌλ‘μ¨ λ€μν κΈ°κΈ°μ λ€νΈμν¬ μ‘°κ±΄μμ μΉμ¬μ΄νΈκ° μΌκ΄λκ² λΉ λ₯Έ κ²½νμ μ 곡νλλ‘ λ³΄μ₯ν©λλ€.
- μ±λ₯ λ³λͺ© νμ μ‘°κΈ° λ°κ²¬: μ±λ₯ μ§νλ₯Ό μ κΈ°μ μΌλ‘ λͺ¨λν°λ§νλ©΄ μ¬μ©μμκ² μν₯μ λ―ΈμΉκΈ° μ μ μ±λ₯ λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°ν μ μμ΅λλ€.
- ν λ΄ μ±λ₯ μ€μ¬ λ¬Έν μ‘°μ±: λͺ νν μ±λ₯ μμ°μ κ°λ°μλ€μ΄ κ°λ° λ° λ°°ν¬ κ³Όμ μμ μ±λ₯μ μ°μ μνλλ‘ μ₯λ €ν©λλ€.
- SEO ν₯μ: ꡬκΈκ³Ό κ°μ κ²μ μμ§μ μΉμ¬μ΄νΈ μλλ₯Ό μμ κ²°μ μμΈμΌλ‘ κ³ λ €ν©λλ€. λΉ λ₯Έ μΉμ¬μ΄νΈλ κ²μ μμ§ μμλ₯Ό ν₯μμν¬ μ μμ΅λλ€.
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°μ μ§μ€ν΄μΌ νλ μ΄μ
μλ°μ€ν¬λ¦½νΈλ λμ μ΄κ³ μνΈμμ©μ μΈ μΉ κ²½νμ κ°λ₯νκ² νλ κ°λ ₯ν μΈμ΄μ λλ€. νμ§λ§ μ λλ‘ κ΄λ¦¬νμ§ μμΌλ©΄ μ±λ₯μ λ³λͺ©μ΄ λ μλ μμ΅λλ€. ν° μλ°μ€ν¬λ¦½νΈ νμΌμ λ€μ΄λ‘λ, νμ±, μ€νμ λ μ€λ μκ°μ΄ 걸리며, μ΄λ νμ΄μ§ λ λλ§μ μ°¨λ¨νκ³ λλ¦¬κ³ λ΅λ΅ν μ¬μ©μ κ²½νμΌλ‘ μ΄μ΄μ§ μ μμ΅λλ€.
λ€μ μμλ€μ κ³ λ €ν΄ λ³΄μΈμ:
- λ€μ΄λ‘λ μκ°: μλ°μ€ν¬λ¦½νΈ νμΌμ΄ ν΄μλ‘ λ€μ΄λ‘λνλ λ° μκ°μ΄ λ μ€λ 걸리며, νΉν λλ¦° λ€νΈμν¬ μ°κ²°μμλ λμ± κ·Έλ μ΅λλ€.
- νμ± λ° μ€ν μκ°: λΈλΌμ°μ λ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό νμ±νκ³ μ€νν΄μΌ ν©λλ€. 볡μ‘νκ³ ν° μλ°μ€ν¬λ¦½νΈ νμΌμ μ²λ¦¬νλ λ° μλΉν μκ°μ΄ 걸릴 μ μμΌλ©°, μ΄λ‘ μΈν΄ λ©μΈ μ€λ λκ° μ°¨λ¨λκ³ νμ΄μ§ λ λλ§μ΄ μ§μ°λ μ μμ΅λλ€.
- λ©λͺ¨λ¦¬ μλΉ: μλ°μ€ν¬λ¦½νΈλ λ©λͺ¨λ¦¬λ₯Ό μλΉνλ©°, κ³Όλν λ©λͺ¨λ¦¬ μ¬μ©μ νΉν 리μμ€κ° μ νλ λͺ¨λ°μΌ κΈ°κΈ°μμ μ±λ₯ λ¬Έμ λ‘ μ΄μ΄μ§ μ μμ΅λλ€.
μ΅μ μ μΉμ¬μ΄νΈ μ±λ₯μ λ¬μ±νκΈ° μν΄μλ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό μ΅μ ννλ κ²μ΄ μ€μν©λλ€. μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° μμ°μ μ€μ νκ³ μ΄λ₯Ό μ€μν¨μΌλ‘μ¨ μΉμ¬μ΄νΈμ μλμ μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° μμ° μ€μ νκΈ°
μ΄μμ μΈ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° μμ°μ μΉμ¬μ΄νΈμ 볡μ‘μ±, νκ² κ³ κ°, μ¬μ© κ°λ₯ν 리μμ€ λ± λ€μν μμμ λ°λΌ λ¬λΌμ§λλ€. νμ§λ§ κ³ λ €ν΄μΌ ν λͺ κ°μ§ μΌλ°μ μΈ κ°μ΄λλΌμΈμ λ€μκ³Ό κ°μ΅λλ€:
- μ΄ μλ°μ€ν¬λ¦½νΈ ν¬κΈ°: μ΄κΈ° νμ΄μ§ λ‘λ μ μ΄ μλ°μ€ν¬λ¦½νΈ ν¬κΈ°λ₯Ό 170KB(μμΆ κΈ°μ€) λ―Έλ§μΌλ‘ λͺ©ννμΈμ. μ΄λ μ΄ κΈ°μ€μΉ λ΄μμ λ‘λλλ νμ΄μ§κ° μ’μ μ¬μ©μ κ²½νμ μ 곡νλ€λ μ°κ΅¬ κ²°κ³Όμ κΈ°λ°ν©λλ€.
- μλ°μ€ν¬λ¦½νΈ νμΌ μ: μλ°μ€ν¬λ¦½νΈ νμΌμ λ²λ€λ§νμ¬ HTTP μμ² μλ₯Ό μ€μ΄μΈμ. HTTP/2κ° μ¬λ¬ μμ²μ μν₯μ μννκΈ΄ νμ§λ§, μμ² μλ₯Ό μ΅μννλ κ²μ μ¬μ ν μ μ΅ν©λλ€.
- ν¬λ¦¬ν°μ»¬ ν¨μ€ μλ°μ€ν¬λ¦½νΈ: νμ΄μ§μ μ΄κΈ° λ·°λ₯Ό λ λλ§νλ λ° νμμ μΈ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μλ³νκ³ μ΅μ νλ₯Ό μ°μ μνμΈμ. μ€μνμ§ μμ μλ°μ€ν¬λ¦½νΈ μ½λμ λ‘λ©μ μ΄κΈ° λ λλ§ μ΄νλ‘ μ§μ°μν€μΈμ.
μ΄κ²λ€μ λ¨μ§ μμμ μΌ λΏμ λλ€. μ¬λ¬λΆμ μν©μ κ°μ₯ μ ν©ν μμ°μ κ²°μ νκΈ° μν΄μλ μΉμ¬μ΄νΈμ νΉμ μꡬ μ¬νκ³Ό μ±λ₯ νΉμ±μ λΆμν΄μΌ ν©λλ€. Google PageSpeed Insights, WebPageTest, Lighthouseμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ μΉμ¬μ΄νΈμ μ±λ₯μ μΈ‘μ νκ³ κ°μ μ΄ νμν μμμ νμ νμΈμ.
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° κ΄λ¦¬ μ λ΅
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό κ΄λ¦¬νκ³ μ±λ₯ μμ° λ΄μμ μ μ§νκΈ° μν λͺ κ°μ§ ν¨κ³Όμ μΈ μ λ΅μ λ€μκ³Ό κ°μ΅λλ€:
1. κ²½λν(Minification)
κ²½λνλ κΈ°λ₯μ μν₯μ μ£Όμ§ μμΌλ©΄μ 곡백, μ£Όμ, μ¬μ©νμ§ μλ μ½λ λ± λΆνμν λ¬Έμλ₯Ό μλ°μ€ν¬λ¦½νΈ μ½λμμ μ κ±°νλ κ³Όμ μ λλ€. μ΄λ₯Ό ν΅ν΄ μλ°μ€ν¬λ¦½νΈ νμΌμ ν¬κΈ°λ₯Ό ν¬κ² μ€μΌ μ μμ΅λλ€.
μμ:
μλ³Έ μλ°μ€ν¬λ¦½νΈ μ½λ:
function calculateSum(a, b) {
// This function calculates the sum of two numbers
var sum = a + b;
return sum;
}
κ²½λνλ μλ°μ€ν¬λ¦½νΈ μ½λ:
function calculateSum(a,b){var sum=a+b;return sum;}
κ²½λν λꡬ:
- UglifyJS: μΈκΈ° μλ μλ°μ€ν¬λ¦½νΈ νμ, κ²½λν, μμΆ λ° λ―Έν ν΄ν·μ λλ€.
- Terser: ES6+λ₯Ό μν μλ°μ€ν¬λ¦½νΈ νμ, λλ ν λ° μμΆ ν΄ν·μ λλ€. UglifyJSμ ν¬ν¬λ‘, μ΅μ μλ°μ€ν¬λ¦½νΈ κΈ°λ₯ μ§μμ μ€μ μ λ‘λλ€.
- Webpack: TerserWebpackPluginκ³Ό κ°μ νλ¬κ·ΈμΈμ μ¬μ©νμ¬ κ²½λνλ₯Ό μνν μ μλ κ°λ ₯ν λͺ¨λ λ²λ€λ¬μ λλ€.
- Parcel: μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μλμΌλ‘ κ²½λννλ μ λ‘ κ΅¬μ±(zero-configuration) μΉ μ ν리μΌμ΄μ λ²λ€λ¬μ λλ€.
2. μ½λ λΆν (Code Splitting)
μ½λ λΆν μ ν° μλ°μ€ν¬λ¦½νΈ νμΌμ νμμ λ°λΌ λ‘λν μ μλ λ μμ μ²ν¬λ‘ λλλ κΈ°μ μ λλ€. μ΄λ₯Ό ν΅ν΄ νΉμ νμ΄μ§λ κΈ°λ₯μ νμν μλ°μ€ν¬λ¦½νΈ μ½λλ§ λ‘λνμ¬ μ΄κΈ° νμ΄μ§ λ‘λ μκ°μ μ€μΌ μ μμ΅λλ€.
μμ:
- ννμ΄μ§
- μν λͺ©λ‘ νμ΄μ§
- μν μμΈ νμ΄μ§
- κ²°μ νμ΄μ§
μ¬μ©μκ° ννμ΄μ§λ₯Ό λ°©λ¬Ένλ©΄ ννμ΄μ§ μλ°μ€ν¬λ¦½νΈ λ²λ€λ§ λ‘λλ©λλ€. μ¬μ©μκ° μν μμΈ νμ΄μ§λ‘ μ΄λνλ©΄ μν μμΈ νμ΄μ§ μλ°μ€ν¬λ¦½νΈ λ²λ€μ΄ λ‘λλ©λλ€. μ΄λ μ΄κΈ° λ‘λ μκ°μ μ€μ΄κ³ μ λ°μ μΈ μ¬μ©μ κ²½νμ ν₯μμν΅λλ€.
μ½λ λΆν λꡬ:
- Webpack: λμ κ°μ Έμ€κΈ°(dynamic imports)μ μ§μ μ (entry points)μ μ¬μ©νμ¬ μ½λ λΆν μ κΈ°λ³Έμ μΌλ‘ μ§μν©λλ€.
- Parcel: μ΅μνμ ꡬμ±μΌλ‘ μ½λ λΆν μ μλμΌλ‘ μ²λ¦¬ν©λλ€.
- Rollup: μ½λ λΆν μ μ§μνλ λͺ¨λ λ²λ€λ¬μ λλ€.
3. νΈλ¦¬ μμ΄νΉ(Tree Shaking)
νΈλ¦¬ μμ΄νΉμ μλ°μ€ν¬λ¦½νΈ νμΌμμ μ¬μ©λμ§ μλ μ½λλ₯Ό μ κ±°νλ κ³Όμ μ λλ€. μ΅μ μλ°μ€ν¬λ¦½νΈ νλ‘μ νΈλ μ’ μ’ ν° λΌμ΄λΈλ¬λ¦¬μ νλ μμν¬λ₯Ό ν¬ν¨νλ©°, μ΄λ€ μ€ μλΉμλ μ€μ λ‘ μ¬μ©λμ§ μλ μ½λλ₯Ό ν¬ν¨νκ³ μμ΅λλ€. νΈλ¦¬ μμ΄νΉμ μ΄ 'μ£½μ μ½λ(dead code)'λ₯Ό μλ³νκ³ μ κ±°νμ¬ μ΅μ’ μλ°μ€ν¬λ¦½νΈ λ²λ€μ ν¬κΈ°λ₯Ό μ€μΌ μ μμ΅λλ€.
μμ:
νλ‘μ νΈμ Lodashμ κ°μ μ 체 λΌμ΄λΈλ¬λ¦¬λ₯Ό κ°μ Έμμ§λ§ λͺ κ°μ§ ν¨μλ§ μ¬μ©νλ€κ³ κ°μ ν΄ λ΄ μλ€. νΈλ¦¬ μμ΄νΉμ μ΅μ’ λ²λ€μμ μ¬μ©λμ§ μλ Lodash ν¨μλ₯Ό μ κ±°νμ¬ ν¬κΈ°λ₯Ό μ€μ λλ€.
νΈλ¦¬ μμ΄νΉ λꡬ:
- Webpack: μ μ λΆμμ μ¬μ©νμ¬ μ¬μ©λμ§ μλ μ½λλ₯Ό μλ³νκ³ μ κ±°ν©λλ€.
- Rollup: νΈλ¦¬ μμ΄νΉμ μν΄ νΉλ³ν μ€κ³λμμΌλ©° μκ³ ν¨μ¨μ μΈ λ²λ€μ μμ±ν©λλ€.
- Terser: κ²½λν κ³Όμ μ μΌλΆλ‘ μ£½μ μ½λ μ κ±°λ₯Ό μνν μ μμ΅λλ€.
4. μ§μ° λ‘λ©(Lazy Loading)
μ§μ° λ‘λ©μ μ΄λ―Έμ§, λΉλμ€, μλ°μ€ν¬λ¦½νΈ μ½λμ κ°μ΄ μ€μνμ§ μμ 리μμ€μ λ‘λ©μ νμν λκΉμ§ μ§μ°μν€λ κΈ°μ μ λλ€. μ΄λ μ΄κΈ°μ λ€μ΄λ‘λνκ³ μ²λ¦¬ν΄μΌ νλ λ°μ΄ν°μ μμ μ€μ¬ μ΄κΈ° νμ΄μ§ λ‘λ μκ°μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
μμ:
νμ΄μ§μ 첫 νλ©΄(viewport)μ 보μ΄μ§ μλ 'below the fold' μ΄λ―Έμ§λ₯Ό μ§μ° λ‘λ©ν μ μμ΅λλ€. μ΄ μ΄λ―Έμ§λ€μ μ¬μ©μκ° μ€ν¬λ‘€νμ¬ λ³΄μΌ λλ§ λ‘λλ©λλ€.
μλ°μ€ν¬λ¦½νΈμ κ²½μ°, νμ΄μ§μ μ΄κΈ° λ λλ§μ μ¦μ νμνμ§ μμ λͺ¨λμ΄λ μ»΄ν¬λνΈλ₯Ό μ§μ° λ‘λ©ν μ μμ΅λλ€. μ΄λ¬ν λͺ¨λμ μ¬μ©μκ° ν΄λΉ λͺ¨λμ νμλ‘ νλ λ°©μμΌλ‘ νμ΄μ§μ μνΈ μμ©ν λλ§ λ‘λλ©λλ€.
μ§μ° λ‘λ© λꡬ:
- Intersection Observer API: μμκ° λ·°ν¬νΈμ λ€μ΄μ€κ±°λ λκ° λλ₯Ό κ°μ§ν μ μλ λΈλΌμ°μ APIμ λλ€. μ΄ APIλ₯Ό μ¬μ©νμ¬ λ¦¬μμ€κ° λ³΄μΌ λ λ‘λ©μ νΈλ¦¬κ±°ν μ μμ΅λλ€.
- λμ κ°μ Έμ€κΈ°(Dynamic Imports): νμμ λ°λΌ μλ°μ€ν¬λ¦½νΈ λͺ¨λμ λ‘λν μ μκ² ν©λλ€.
- μ§μ° λ‘λ© μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬: μ΄λ―Έμ§ λ° κΈ°ν 리μμ€μ μ§μ° λ‘λ© κ΅¬νμ λ¨μννλ μ¬λ¬ λΌμ΄λΈλ¬λ¦¬κ° μμ΅λλ€.
5. μ½λ μ΅μ ν
ν¨μ¨μ μΈ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μμ±νλ κ²μ μμ ν¬κΈ°λ₯Ό μ΅μννκ³ μ±λ₯μ ν₯μμν€λ λ° μ€μν©λλ€. λΆνμν μ½λλ₯Ό νΌνκ³ , ν¨μ¨μ μΈ μκ³ λ¦¬μ¦μ μ¬μ©νλ©°, μ±λ₯μ μν΄ μ½λλ₯Ό μ΅μ ννμΈμ.
μμ:
- μ μ λ³μ νΌνκΈ°: μ μ λ³μλ μ΄λ¦ μΆ©λμ μΌμΌν€κ³ λ©λͺ¨λ¦¬ μλΉλ₯Ό μ¦κ°μν¬ μ μμ΅λλ€.
- ν¨μ¨μ μΈ λ£¨ν μ¬μ©: νΉμ μ¬μ© μ¬λ‘μ λ°λΌ μ μ ν 루ν μ ν(μ: for, while, forEach)μ μ ννμΈμ.
- DOM μ‘°μ μ΅μ ν: DOM μ‘°μμ μ±λ₯ λ³λͺ©μ΄ λ μ μμΌλ―λ‘ μ΅μννμΈμ. document fragmentsμ κ°μ κΈ°μ μ μ¬μ©νμ¬ DOM μ λ°μ΄νΈλ₯Ό μΌκ΄ μ²λ¦¬νμΈμ.
- μμ£Ό μ κ·Όνλ λ°μ΄ν° μΊμ±: μΊμ±μ λ°λ³΅μ μΌλ‘ λ°μ΄ν°λ₯Ό κ°μ Έμ¬ νμμ±μ μ€μ¬ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
6. μ½ν μΈ μ μ‘ λ€νΈμν¬(CDN) μ¬μ©
CDNμ μλ°μ€ν¬λ¦½νΈ νμΌκ³Ό κ°μ μ μ μμ μ μΊμνκ³ μ¬μ©μμ μμΉμμ κ°μ₯ κ°κΉμ΄ μλ²μμ μ λ¬νλ μ§λ¦¬μ μΌλ‘ λΆμ°λ μλ² λ€νΈμν¬μ λλ€. μ΄λ λκΈ° μκ°μ μ€μ΄κ³ λ€μ΄λ‘λ μλλ₯Ό ν₯μμν€λ©°, νΉν μλ³Έ μλ²μμ λ©λ¦¬ λ¨μ΄μ§ μ¬μ©μμκ² ν¨κ³Όμ μ λλ€.
μμ:
Cloudflare, Amazon CloudFront λλ Akamaiμ κ°μ CDNμ μλ°μ€ν¬λ¦½νΈ νμΌμ νΈμ€ν ν μ μμ΅λλ€. μ¬μ©μκ° μΉμ¬μ΄νΈλ₯Ό μμ²νλ©΄ CDNμ μ¬μ©μμ μμΉμμ κ°μ₯ κ°κΉμ΄ μλ²μμ μλ°μ€ν¬λ¦½νΈ νμΌμ μ λ¬νμ¬ λ€μ΄λ‘λ μκ°μ μ€μ λλ€.
7. μ΅μ μλ°μ€ν¬λ¦½νΈ νλ μμν¬ λ° λΌμ΄λΈλ¬λ¦¬
μλ°μ€ν¬λ¦½νΈ νλ μμν¬μ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ μ€νκ² μ ννμΈμ. κ°λ ₯ν κΈ°λ₯μ μ 곡νκ³ κ°λ° ν¨μ¨μ±μ ν₯μμν¬ μ μμ§λ§, μλ°μ€ν¬λ¦½νΈ λ²λ€ ν¬κΈ°μ μλΉν μ€λ²ν€λλ₯Ό μΆκ°ν μλ μμ΅λλ€. κ°λ²Όμ΄ λμμ μ¬μ©νκ±°λ νμν νΉμ λͺ¨λλ§ κ°μ Έμ€λ κ²μ κ³ λ €νμΈμ.
μμ:
Lodashλ Moment.jsμ κ°μ λκ·λͺ¨ λΌμ΄λΈλ¬λ¦¬μμ λͺ κ°μ§ νΉμ κΈ°λ₯λ§ νμν κ²½μ°, μ 체 λΌμ΄λΈλ¬λ¦¬ λμ νμν λͺ¨λλ§ κ°μ Έμ€λ κ²μ κ³ λ €νμΈμ. λλ λ μμ ννλ¦°νΈλ‘ μ μ¬ν κΈ°λ₯μ μ 곡νλ λ μκ³ μ λ¬Ένλ λΌμ΄λΈλ¬λ¦¬λ₯Ό μ°Ύμ보μΈμ.
8. μμΆ
μΉ μλ²μμ μμΆμ νμ±ννμ¬ μ μ‘ μ€ μλ°μ€ν¬λ¦½νΈ νμΌμ ν¬κΈ°λ₯Ό μ€μ΄μΈμ. Gzipκ³Ό Brotliλ νμΌ ν¬κΈ°λ₯Ό ν¬κ² μ€μΌ μ μλ μΈκΈ° μλ μμΆ μκ³ λ¦¬μ¦μ λλ€.
μμ:
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° λͺ¨λν°λ§ λ° λΆμ λꡬ
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό μ κΈ°μ μΌλ‘ λͺ¨λν°λ§νκ³ λΆμνλ κ²μ μ±λ₯ μμ°μ μ μ§νκ³ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³νλ λ° μ€μν©λλ€. λ€μμ μ μ©ν λꡬλ€μ λλ€:
- Google PageSpeed Insights: μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° μ΅μ ν μ μμ ν¬ν¨ν μ±λ₯ κΆμ₯ μ¬νμ μ 곡ν©λλ€.
- WebPageTest: λ€μν λ€νΈμν¬ μλ λ° κΈ°κΈ°λ₯Ό ν¬ν¨ν λ€μν 쑰건μμ μΉμ¬μ΄νΈμ μ±λ₯μ λΆμν μ μλ κ°λ ₯ν μΉμ¬μ΄νΈ μ±λ₯ ν μ€νΈ λꡬμ λλ€.
- Lighthouse: μΉμ¬μ΄νΈ μ±λ₯, μ κ·Όμ± λ° λͺ¨λ² μ¬λ‘λ₯Ό κ°μ¬νλ μλνλ λꡬμ λλ€. μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° λ° κΈ°ν μ±λ₯ μ§νμ λν μμΈν λ³΄κ³ μλ₯Ό μ 곡ν©λλ€.
- Webpack Bundle Analyzer: μλ°μ€ν¬λ¦½νΈ λ²λ€μ ν¬κΈ°λ₯Ό μκ°ννκ³ ν° μ’ μμ± λ° μ΅μ ν κΈ°νλ₯Ό μλ³νλ λ° λμμ΄ λλ Webpack νλ¬κ·ΈμΈμ λλ€.
- Source Map Explorer: μμ€ λ§΅μ νμ±νμ¬ μλ°μ€ν¬λ¦½νΈ λ²λ€ ν¬κΈ°λ₯Ό λΆμν©λλ€.
- λΈλΌμ°μ κ°λ°μ λꡬ: λλΆλΆμ μ΅μ λΈλΌμ°μ λ μλ°μ€ν¬λ¦½νΈ νμΌμ ν¬κΈ°λ₯Ό κ²μ¬νκ³ μ±λ₯μ λΆμν μ μλ κ°λ°μ λꡬλ₯Ό μ 곡ν©λλ€.
μ€μ μ¬λ‘
κΈ°μ λ€μ΄ μΉμ¬μ΄νΈ μ±λ₯ ν₯μμ μν΄ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό μ±κ³΅μ μΌλ‘ κ΄λ¦¬ν μ€μ μ¬λ‘λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
- Google: ꡬκΈμ κ²μ, Gmail, μ§λ λ± λ€μν μΉ μ ν리μΌμ΄μ μ λν΄ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μ§μμ μΌλ‘ μ΅μ νν©λλ€. μ½λ λΆν , νΈλ¦¬ μμ΄νΉ, κ²½λνμ κ°μ κΈ°μ μ μ¬μ©νμ¬ μ ν리μΌμ΄μ μ΄ λΉ λ₯΄κ² λ‘λλκ³ λ°μμ΄ λΉ λ₯Έ μ¬μ©μ κ²½νμ μ 곡νλλ‘ λ³΄μ₯ν©λλ€.
- Facebook: νμ΄μ€λΆμ μ체 κ°λ°ν μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬μΈ Reactλ₯Ό μ¬μ©νμ¬ μΉ λ° λͺ¨λ°μΌ μ ν리μΌμ΄μ μ ꡬμΆν©λλ€. μ½λ λΆν λ° μ§μ° λ‘λ©κ³Ό κ°μ κΈ°μ μ ꡬννλ λ± Reactμ μ±λ₯ μ΅μ νμ λ§μ ν¬μλ₯Ό νμ΅λλ€.
- Netflix: λ·νλ¦μ€λ μ€νΈλ¦¬λ° μλΉμ€λ₯Ό μ 곡νκΈ° μν΄ μλ°μ€ν¬λ¦½νΈμ λ€λ₯Έ κΈ°μ μ μ‘°ν©μ μ¬μ©ν©λλ€. μΉμ¬μ΄νΈμ μ ν리μΌμ΄μ μ΄ λΉ λ₯΄κ² λ‘λλκ³ μνν μμ² κ²½νμ μ 곡νλλ‘ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μ μ€νκ² λͺ¨λν°λ§νκ³ μ΅μ νν©λλ€.
- BBC: BBC μΉμ¬μ΄νΈλ λ€μν μ½ν μΈ λ²μμ κ±Έμ³ λΉ λ₯΄κ³ μΌκ΄λ μ¬μ©μ κ²½νμ μ μ§νκΈ° μν΄ μ±λ₯ μμ°μ μ¬μ©ν©λλ€. μμ° λ΄μμ μ μ§νκΈ° μν΄ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό μ κ·Ήμ μΌλ‘ λͺ¨λν°λ§νκ³ μ΅μ ν κΈ°μ μ ꡬνν©λλ€.
κ²°λ‘
μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° κ΄λ¦¬λ μ΅μ μ μΉμ¬μ΄νΈ μ±λ₯μ λ¬μ±νκ³ λΉ λ₯΄κ³ λ§€λ ₯μ μΈ μ¬μ©μ κ²½νμ μ 곡νλ λ° νμμ μ λλ€. μλ°μ€ν¬λ¦½νΈμ μ΄μ μ λ§μΆ μΉ μ±λ₯ μμ°μ ꡬνν¨μΌλ‘μ¨ μ±λ₯ λ³λͺ© νμμ μ¬μ μ μλ³νκ³ ν΄κ²°νμ¬ μΉμ¬μ΄νΈκ° λ°μ ν¨μ λ°λΌ κ°λ³κ³ λΉ λ₯΄κ² μ μ§λλλ‘ ν μ μμ΅λλ€.
λ€μ μ¬νμ κΈ°μ΅νμΈμ:
- νμ€μ μΈ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ° μμ°μ μ€μ νμΈμ.
- κ²½λν, μ½λ λΆν , νΈλ¦¬ μμ΄νΉ, μ§μ° λ‘λ©κ³Ό κ°μ μ λ΅μ ꡬννμΈμ.
- μ±λ₯μ μν΄ μλ°μ€ν¬λ¦½νΈ μ½λλ₯Ό μ΅μ ννμΈμ.
- CDNμ μ¬μ©νμ¬ μ§λ¦¬μ μΌλ‘ λΆμ°λ μλ²μμ μλ°μ€ν¬λ¦½νΈ νμΌμ μ λ¬νμΈμ.
- μ μ ν λꡬλ₯Ό μ¬μ©νμ¬ μλ°μ€ν¬λ¦½νΈ μμ ν¬κΈ°λ₯Ό μ κΈ°μ μΌλ‘ λͺ¨λν°λ§νκ³ λΆμνμΈμ.
μ΄λ¬ν κ°μ΄λλΌμΈμ λ°λ₯΄λ©΄ μΉμ¬μ΄νΈμ μ±λ₯μ ν¬κ² ν₯μμν€κ³ μ¬μ©μ κ²½νμ κ°μ νλ©° SEO μμλ₯Ό λμΌ μ μμ΅λλ€.